<template>
  <div class="album">
    <header><span>相册管理</span>
      <SvgIcon name="设置" :size="20" @click="goSetting"></SvgIcon>
    </header>
    <div class="search">
      <van-field left-icon="search" v-model="search" placeholder="搜索图片">
        <template #button>
          <SvgIcon name="清空" v-show="search.length > 0" @click="initData" :size="20"></SvgIcon>
          <van-button size="small" type="primary" @click="querySubmit">AI搜索</van-button>
        </template>
      </van-field>
    </div>
    <div class="card">
      <div class="character" v-if="peopleImgList.length > 0">
        <div class="header" @click="FigureShow = true">
          <span>人物</span>
          <span>全部</span>
          <SvgIcon name="大于" :size="18"></SvgIcon>

        </div>
        <div class="imgList">
          <div class="img" v-for="item in peopleImgList" @click="selectedImg(item)">
            <van-image round width="68" height="68" :src=item.url />
            <div class="name">{{ item.name }}</div>
          </div>

        </div>
      </div>
      <van-divider></van-divider>
      <div class="place" v-if="isAddrFlag">
        <div class="header" @click="PlaceShow = true">
          <span>地点</span>
          <span>全部</span>
          <SvgIcon name="大于" :size="18"></SvgIcon>

        </div>
        <div class="imgList">
          <div class="img" v-for="(item ,key) in addrImgList" @click="selectAddr(key)">
            <van-image width="80" height="80" :src=getImgUrl(item) />
            <div class="name">{{key}}</div>
          </div>
        </div>
      </div>
      <van-divider />
      <van-tabs v-model:active="tabActive" type="card" v-if="tagList.length > 0" @click="tabHandler">
        <van-tab name="全部" title="全部"></van-tab>
        <van-tab :name=item :title=item v-for="item in tagList" :key=item></van-tab>
        <van-button style="position: absolute;right: -15px;top: 30%;width: 35px; " type="default" size="small"
          @click="openTagClass">三</van-button>
      </van-tabs>
      <van-checkbox-group v-model="checked" @change="checkChange" direction="horizontal">
        <div class="timeImgList" v-for="(item, key) in dateImg">
          <div class="time">{{ key }}</div>
          <div class="img">
            <div v-for="ite in item" style=" position: relative;">
              <van-checkbox :name="key + ite" style="position: absolute;left: 60px;top: 3px; z-index: 99;"
                v-if="peopleImgList.length === 0 && tagList.length === 0" />
              <van-image width="80" height="77" radius="5px" :src=getImgUrl(ite) @click="showImage(ite)" />

            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <van-image-preview v-model:show = "show" :images="preImages" double-scale>
    </van-image-preview>
    <van-popup :overlay-style="{ background: 'rgba(0,0,0,0)' }" v-model:show="PlaceShow" position="right"
      :style="{ width: '100%', height: '100%' }">
      <Place @back="PlaceShow = false" @imgClick="selectAddr"></Place>
    </van-popup>
    <van-popup :overlay-style="{ background: 'rgba(0,0,0,0)' }" v-model:show="UrbanShow" position="right"
      :style="{ width: '100%', height: '100%' }">
      <Urban @back="UrbanShow = false" :title="selectAddrItem"></Urban>
    </van-popup>
    <van-popup :overlay-style="{ background: 'rgba(0,0,0,0)' }" v-model:show="FigureShow" position="right"
      :style="{ width: '100%', height: '100%' }">
      <Figure @back="FigureShow = false" @imgClick="selectedImg" :fileList="peopleImgList"></Figure>
    </van-popup>
    <van-popup :overlay-style="{ background: 'rgba(0,0,0,0)' }" v-model:show="ReviseFigure" position="right"
      :style="{ width: '100%', height: '100%' }">
      <reviseFigure @back="ReviseFigure = false" :selectUrl="imgItem"></reviseFigure>
    </van-popup>
    <van-action-sheet v-model:show="showSheet" title="更多标签">
      <div class="content">
        <!-- 弹窗多选按钮 -->
        <van-checkbox name="a">
          <template #icon></template>
          <template #default="{ checked, disabled }">
            <van-button style="width: 70px;" size="small" round :plain="!checked" type="primary" @click = "selectAllTag">全部</van-button>
          </template>
        </van-checkbox>
        <van-checkbox-group ref="checkBoxGroup" v-model="sheetcheckedAll" shape="square" @change="selectedTagClass">

          <div style="display: flex; position: relative; margin: 60px 0;flex-wrap: wrap" v-for="(item,key) in classTagList">
            <div style="position: absolute;top: -30px;left:12px;font-size: 16px;font-weight: 600;">{{key}}</div>
            <van-checkbox :name="ite" v-for="ite in item">
              <template #icon></template>
              <template #default="{ checked, disabled }">
                <van-button style="width: 80px;white-space: nowrap" size="small" round :plain="!checked" type="primary">{{ ite }}</van-button>
              </template>
            </van-checkbox>

          </div>


        </van-checkbox-group>

      </div>
    </van-action-sheet>
    <div v-show="images.length > 0" class="search-button">
      <van-button @click="close" plain type="primary">取消</van-button>
      <van-button @click="download" plain type="primary">下载</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import {showImagePreview} from 'vant'
import {
  getAllCityInfo,
  getAllImagesByTimeSort,
  getAllPeople,
  getAllPhotoTag,
  getImgUrl,
  searchPhoto,
  getTagImagesByTimeSort,
  getAllTags,
  getTagsImagesByTimeSort, downloadFiles, downloadFile
} from "@/api/index.js";
import { usePortStore } from "@/stores/index.js";
import Place from "./components/place.vue"
import Urban from "./components/urban.vue"
import Figure from "./components/figure.vue"
import reviseFigure from "./components/reviseFigure.vue"
import {useRouter} from "vue-router";
const search = ref('')
const router = useRouter()
const selectAddrItem = ref('')
const tabActive = ref('')
const peopleImgList = ref([])
const addrImgList = ref({})
const tagList = ref([])
const PlaceShow = ref(false)
const UrbanShow = ref(false)
const FigureShow = ref(false)
const ReviseFigure = ref(false)
const showSheet = ref(false)
const isAddrFlag = ref(true)
const sheetcheckedAll = ref([])
const checkAll = ref([])
const classTagList = ref([])
const checkBoxTag = ref([])
const show = ref(false)

const imgItem = ref({})
const dateImg = ref()
const checked = ref([])//已经选中的下标
const preImages = ref([])//已经选中的下标
//选中的图片的地址
const images = computed(() => checked.value.map(item => item.substring(item.indexOf('/') + 1)))

const showImage = (item) =>{
  showImagePreview({
    images:[getImgUrl(item)],
    closeable: true,
    showIndex: false,
  })
}

const close = () => {
  checked.value = []
}

const download = () => {
  if(images.value.length == 1){
    downloadFile(images.value[0])
  }else if(images.value.length > 1) {
    downloadFiles(images.value)
  }
}

const selectedTagClass = async() =>{
  checkAll.value = []
  const response = await getTagsImagesByTimeSort(sheetcheckedAll.value)
  tabActive.value = '全部'
  dateImg.value = response.data
}
const selectAllTag = () =>{
  sheetcheckedAll.value = [];
  tabActive.value = '全部'
  initData()
}
const openTagClass = async () =>{
  const response = await getAllTags()
  classTagList.value = response.data
  showSheet.value = true
}

const goSetting = () =>{
  router.push('/setting')
}
const selectedImg = (item) => {
  imgItem.value = item
  console.log(imgItem.value)
  ReviseFigure.value = true
}

const selectAddr = (item) =>{
  selectAddrItem.value = item
  UrbanShow.value = true
}

// 选中的图片
const checkChange = (data) => {
}

const tabHandler = async (name) => {
  if(!showSheet.value) {
    console.log(tabActive.value)
    if (tabActive.value === '全部') {
      const response2 = await getAllImagesByTimeSort();
      dateImg.value = response2.data
    } else {
      const response = await getTagImagesByTimeSort(tabActive.value);
      if (response.code === 200) {
        dateImg.value = response.data
      }
    }
  }
}

const querySubmit = async () => {
  console.log(search.value)
  if (search.value != '') {
    const { data } = await searchPhoto({ query: search.value, search_num: 10 });
    dateImg.value = data
    peopleImgList.value = []
    tagList.value = []
    isAddrFlag.value = false
  } else {
    peopleImgList.value = []
    tagList.value = []
    dateImg.value = []
    const { data, code } = await getAllPeople();
    if (code == 200) {
      data.forEach(item => {
        peopleImgList.value.push({ id: item.id, name: item.name, url: getImgUrl(item.file_path[0]), attribute: item.attribute })
      })
    }
    //获取标签数据
    const response = await getAllPhotoTag();
    tagList.value = response.data
    const response2 = await getAllImagesByTimeSort();
    // let obj = response2.data
    // obj['2024-09-05 Wednesday'] = response2.data['2024-09-04 Wednesday']
    dateImg.value = response2.data
    isAddrFlag.value = true
    console.log(dateImg.value)
  }
}

const initData = async () =>{
  search.value = ''
  peopleImgList.value = []
  tagList.value = []
  dateImg.value = []
  const { data, code } = await getAllPeople();
  if (code == 200) {
    data.forEach(item => {
      peopleImgList.value.push({ id: item.id, name: item.name, url: getImgUrl(item.file_path[0]), attribute: item.attribute })
    })
  }
  isAddrFlag.value = true
  //获取标签数据
  const response = await getAllPhotoTag();
  tagList.value = response.data
  const response2 = await getAllImagesByTimeSort();
  // let obj = response2.data
  // obj['2024-09-05 Wednesday'] = response2.data['2024-09-04 Wednesday']
  dateImg.value = response2.data
  console.log(dateImg.value)
}

onMounted(async () => {
  //获取人物数据图片
  const { data, code } = await getAllPeople();
  if (code == 200) {
    data.forEach(item => {
      peopleImgList.value.push({ id: item.id, name: item.name, url: getImgUrl(item.file_path[0]), attribute: item.attribute })
    })
  }
  //获取标签数据
  const response = await getAllPhotoTag();
  tagList.value = response.data
  const response2 = await getAllImagesByTimeSort();
  dateImg.value = { ...response2.data, ...response2.data, ...response2.data }
  const response3 = await getAllCityInfo();
  addrImgList.value = response3.data

})
</script>

<style lang="scss" scoped>
.album {
  background-color: #DBECFE;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .search-button {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;

    button {
      width: 50%;
      height: 100%;
      border-radius: 0;
      border: none;

      &:nth-child(1) {
        border-right: 1px solid rgba(175, 175, 175, 0.466);
      }
    }
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    border-bottom: 1px solid #eee;

    span {
      font-size: 17px;
      font-weight: 800;
      color: #191919;
    }
  }

  .search {
    height: 45px;
    width: 100%;
    padding: 0px 20px;
    margin-top: 10px;

    .van-field {
      height: 100%;
      width: 100%;
      border-radius: 8px;
      background: #FFF;
      align-items: center;
      padding: 0 15px;

      .van-field__value {
        .van-field__body {

          display: flex;
          align-items: center;
        }

      }
    }
  }

  :deep(.van-field__button) {
    width: 95px !important;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: end;

    button {
      margin-left: 10px;
    }
  }

  .card {
    width: 100%;
    //border-radius: 20px 20px 0px 0px;
    background: #FFF;
    margin-top: 28px;
    padding: 16px;
    flex: 1;
    overflow: auto;

    .character,
    .place {
      width: 100%;

      .header {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: end;

        span {
          font-size: 14px;
          color: #191919;

          &:nth-child(1) {
            font-weight: 600;
            margin-right: auto;
          }

          &:nth-child(2),
          &:nth-child(3) {
            color: #818391;
            font-size: 12px;
          }
        }
      }

    }

    .character {
      .imgList {
        width: 100%;
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        margin: 16px 0;
        height: 100px;

        .img {
          width: 68px;
          height: 68px;
          text-align: center;
          margin-right: 10px;

          .name {
            color: #1D2147;
            font-size: 12px;
          }
        }
      }
    }

    .place {
      .imgList {
        width: 100%;
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        margin: 16px 0;
        height: 90px;

        .img {
          text-align: center;
          margin-right: 10px;
          position: relative;

          .name {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            color: #FFFFFF;
            font-size: 12px;
          }
        }
      }
    }

    .timeImgList {
      width: 100%;

      .time {
        color: #191919;
        font-size: 14px;
        margin: 12px 0;

      }

      .img {
        //overflow-y: auto;
        flex-wrap: wrap;
        //max-height: 200px;
        overflow: auto;
        display: flex;

        .van-image {

          margin: 0 3px;
        }
      }
    }

    :deep(.van-tabs--card) {

      margin-top: 10px;
      padding-top: 15px;
    }

    :deep(.van-tabs__nav--card) {
      margin-left: 0;
      margin-right: 0;
      border: none;
    }

    :deep(.van-tab--card) {
      color: #1D2147;
      font-size: 12px;
      border-radius: 20px;
      background: #F2F3F7;
      border-right: none;
      margin-right: 10px;
    }

    :deep(.van-tab--active) {
      color: var(--van-primary-color);
      background: #E4EAFF;
    }

    :deep(.van-tabs__wrap) {
      margin-right: 20px;
    }
  }
}
</style>
